<template>
	
	<!-- <view class="container"> -->
		<!-- <view class="index-container">
		    
		  </view> -->
	<view style="height: 100%;width: 100%;">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
			<view class="SW">
				<view class="header" style="position: absolute;z-index: 2;">
				<!-- home中增加的搜索功能 -->
					<navigator url="/pages/components/search/search" open-type="navigate" style="display: inline;">
						<uni-easyinput prefixIcon="search" disabled style="width: 250px;margin:10px;" placeholder="搜索" ></uni-easyinput>
			
					  <!-- <input
						type="text"
						placeholder="请输入搜索内容"
						@focus="onSearchFocus"
						class="search-input"
						disabled
					  /> -->
					  </navigator>
				</view>
				<uni-swiper-dot>
					<swiper class="swiper" style="height: 200px;" circular indicator-dots="false" autoplay="false" interval="2000" duration="500">
						<swiper-item v-for="imge in swiper_img" :key="imge.name" class="SW-item">
							<image :src="imge.scr" style="width: 100%;"></image>
							<view class="cover-conten">
								<span style="font-size: 18px;font-weight: bold;letter-spacing: 2px;">{{imge.name}}</span>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			
			<view class="sdv">
				<!-- 菜品分类选项 -->
				<view style="height:70px;width: 100%;background-color: #ffffff;text-align: center;line-height: 140rpx;display: flex;flex-direction: row;">
					<!-- <view v-for="icon in t_tab" :key="icon.name" style="width: 80px;margin-left: 10px;" @click="filterByCategory(icon.name)"> -->
					<view v-for="icon in t_tab" :key="icon.name" style="width: 80px;margin-left: 10px;" >
						<navigator :url="icon.routerUrl"  open-type="navigate">
							<image :src="icon.src" style="width: 30px;height: 30px;"/>
							<p style="margin-top: -55px;">{{icon.name}}</p>
						</navigator>
					</view>
				</view>
				
				<uni-card title="家常菜" extra="更多 >" style="margin: 0%;margin-top: 15px;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" :show-scrollbar="false">
						<span class="custom-cover" v-for="imgs in scrollImage_1" :key="imgs.id">
							<navigator :url="combindStr(imgs.name)" open-type="navigate" style="display: inline;">
								<img mode="aspectFill" :src="imgs.src" style="height: 150px;width: 200px;border-radius: 10px;"/>
								<span class="cover-content">
									<text style="width: 100px;">{{imgs.name.slice(1,-1)}}</text>
									<text style="width: 50px;height: 80%;font-size:10px;margin-left: 50px;text-align: center;line-height: 65rpx;border-radius: 10px;background-color: #e7e7e7;color: #000000;">{{imgs.duration}}分钟</text>
								</span>
							</navigator>
						</span>  
					</scroll-view>
				</uni-card>
				
				<uni-card title="日常小炒" extra="更多 >" style="margin: 0%;margin-top: 15px;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" :show-scrollbar="false">
						<span class="custom-cover" v-for="imgs in scrollImage_2" :key="imgs.id">
							<navigator :url="combindStr(imgs.name)" open-type="navigate" style="display: inline;">
								<img mode="aspectFill" :src="imgs.src" style="height: 150px;width: 200px;border-radius: 10px;"/>
								<span class="cover-content">
									<text style="width: 100px;">{{imgs.name.slice(1,-1)}}</text>
									<text style="width: 50px;height: 80%;font-size:10px;margin-left: 50px;text-align: center;line-height: 65rpx;border-radius: 10px;background-color: #e7e7e7;color: #000000;">{{imgs.duration}}分钟</text>
								</span>
							</navigator>
						</span>
					</scroll-view>
				</uni-card>
					
				<uni-card title="猜你喜欢"   style="margin: 0%;margin-top: 15px;padding-bottom: 5px;">
					<template v-slot:title>
						 
						<uni-list-item>
							
							<template v-slot:body>
								<text style="width: 500px;">猜你喜欢</text>
							</template>
							<template v-slot:footer >  
								
								<text style="font-size: 5px;color:#9d9d9d;width: 60px;top: 50%;transform: translateY(10%);" @click="iconClicks()">更多 ></text>
								
							</template>
						</uni-list-item>
					</template>
					<view>
						<view class="waterfall">
							<view
							  :id="`cont_${index + 1}`"
							  class="cont-box"
							  :style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
							  v-for="(numVal, index) in flowData.column"
							  :key="numVal"
							>
								<view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
									<image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
									<view class="tit-tip multi-line-omit">{{ item.title }}</view>
									<view class="desc-tip multi-line-omit">{{ item.desc }}</view>
								</view>
							</view>
						</view>
						<view style="width: 100%;text-align: center;margin-top: 10px;">- 到底了 -</view>
					</view>
				</uni-card>
				
				
			</view>
			
		</scroll-view>
	 </view>
	<!-- </view> -->
	
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';
import {ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
//搜索跳转页面
function onSearchFocus() {
  // 当输入框获得焦点时，跳转到搜索页面
  uni.navigateTo({
	url: '/pages/components/search/search' // 替换为你的搜索结果页面路径
  });
}

const baseurl = "/pages/components/detail/detail?name="

let scrollTop:number =  0
let old = {
		scrollTop: 0
	}
	


const router = useRouter();

const imagePath = ref('@/source/image/dumping.png');
// 缓存每页最多
const MAX_CACHE_DATA = 100;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;
let img_1 = '@/source/image/dumping.png'
let swiper_img = [
	{
		scr:"http://s1.cdn.jiaonizuocai.com/caipu/201801/2113/211320161586.jpg/MzYweDI1MA",
		name:'百香果蜂蜜磅蛋糕'
	},
	{
		scr:"https://ts4.cn.mm.bing.net/th?id=ORMS.ba69f2f09fc41372de3934e0b54f688c&w=197&h=113&c=6&rs=2&o=6&pid=Wdp",
		name:'西兰花炒肉'
	},
	{
		scr:"https://tse3-mm.cn.bing.net/th/id/OIP-C.wc-YHMXctBt_Phdx6aEHMgHaEc?w=260&h=180&c=7&r=0&o=5&pid=1.7",
		name:'西兰花炒肉'
	},
]
//主卡上的4个选项图标 （后续加入连接
let t_tab = [
	{
		src:'../../source/image/dumping.png',
		name:'蒸煮',
		routerUrl:'/pages/components/dish_sort/steamCook/steamCook'
	},
	{
		src:'../../source/image/nudo.png',
		name:'爆炒',
		routerUrl:'/pages/components/dish_sort/Fried/Fried'
	},
	{
		src:'../../source/image/soup.png',
		name:'汤粥',
		routerUrl:'/pages/components/dish_sort/soupPorridge/soupPorridge'
	},
	{
		src:'../../source/image/ice.png',
		name:'全部',
		routerUrl:'/pages/components/dish_sort/allDish/allDish'
	},
];

//轮播菜单选项（后续加入连接
let scrollImage_1 = [
	{
		id:1,
		name:"'白切鸡'",
		src:"https://picx.zhimg.com/v2-cee47e1466402036a68ea3a2abec5a5f_1440w.jpg",
		duration:25,
		category: '蒸煮'
	},
	{
		id:2,
		name:"'宫保鸡丁'",
		src:"https://pic4.zhimg.com/v2-e25c66b96b1f4db169ac11cfc6d449c7_1440w.jpg",
		duration:16,
		category: '爆炒'
	},
	{
		id:3,
		name:"'酸汤鱼'",
		src:"https://pic1.zhimg.com/v2-fdc93b1c1e4c024128762632845557c4_1440w.jpg",
		duration:40,
		category: '汤粥'
	},
	{
		id:4,
		name:"'荷兰豆炒木耳'",
		src:"http://s1.cdn.jiaonizuocai.com/caipu/201803/1917/191750369588.jpg/MzYweDI1MA",
		duration:30,
		category: '爆炒'
	},
];


let scrollImage_2 = [
	{
		id:1,
		name:"'农家小炒肉'",
		src:"http://img.xiaochushuo.com/web/261681549.jpg!s4",
		duration:25,
		category: '蒸煮'
	},
	{
		id:2,
		name:"'干炒牛河'",
		src:"http://img.xiaochushuo.com/web/259071115.jpg!s4",
		duration:16,
		category: '爆炒'
	},
	{
		id:3,
		name:"'彩椒肘花肉炒饭'",
		src:"http://img.xiaochushuo.com/web/263596100.jpg!s4",
		duration:40,
		category: '汤粥'
	},
	{
		id:4,
		name:"'辣炒猪头肉'",
		src:"http://img.xiaochushuo.com/web/263268101.jpg!s4",
		duration:30,
		category: '爆炒'
	},
];

function iconClick(type) {
	uni.showToast({
		title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
		icon: 'none'
	})
}
function iconClicks() {
	uni.showToast({
		title: `点击了${'右侧'}的图标`,
		icon: 'none'
	})
}

const selectedCategory = ref('全部');

function filterByCategory(category) {
	selectedCategory.value = category;
}

const filteredScrollImage = computed(() => {
	if (selectedCategory.value === '全部') {
		return scrollImage_1;
	}
	return scrollImage_1.filter(img => img.category === selectedCategory.value);
});

function pushUrlRouter(){
	router.push('/detail');
}
const searchValue = ref(''); // 使用 ref 来创建响应式数据

let lists:string[] = ['A', 'B', 'C', 'D', 'E'];
let windowHeight = uni.getSystemInfoSync().windowHeight;


 
const _this = getCurrentInstance();
const flowData = reactive({
  list: [], // 数据值
  column: 2, // 瀑布列数
  columnSpace: 2 // 瀑布列宽间距
});
/* 数据赋值 */
flowData.list = [
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736196297922801.jpg",
    title: "红烧鸡翅",
    desc: "老少皆宜"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736202953769191.jpg",
    title: "清蒸鲳鱼",
    desc: "昌，美也，以味名"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2021/12/16/2021121616396423832251958079.jpg?x-oss-process=style/c320",
    title: "香蕉松饼",
    desc: "阳春白雪！"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023082716931444402131.jpg",
    title: "芦笋虾仁",
    desc: "蔬菜之王"
  },
  {
    imgUrl: "https://static.meishichina.com/a1/pic/2023011316736199373018391.jpg",
    title: "山药炖排骨",
    desc: "吮指之乐"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2024/12/15/2024121517342533381741.jpg?x-oss-process=style/c320",
    title: "煎蛋萝卜丝汤",
    desc: "老U爱小轩哥"
  },
  {
    imgUrl: "https://i3.meishichina.com/attachment/recipe/2024/12/15/2024121517342532199021.jpg?x-oss-process=style/c320",
    title: "红烧鸡腿",
    desc: "美味营养"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152463308665113.jpg?x-oss-process=style/c180",
    title: "香辣螃蟹",
    desc: "壳都嗦干净，真的太有味！"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/25/20180425152462830197313.jpg?x-oss-process=style/c180",
    title: "酸辣凤爪",
    desc: "酸爽开胃，爽脆Q弹超好吃~"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/07/01/20180701153042170188610169539.jpg?x-oss-process=style/c180",
    title: "剁椒巴沙鱼",
    desc: "无刺放心大口炫"
  },
  {
    imgUrl: "http://i80.meishichina.com/attachment/recipe/201005/201005191421565.jpg?x-oss-process=style/c180",
    title: "干煸鸡翅",
    desc: "皮脆肉嫩无腥味"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2017/10/13/20171013150787956071613.jpg?x-oss-process=style/c180",
    title: "水煮牛蛙",
    desc: "开胃解馋，多干两碗饭！"
  },
  {
    imgUrl: "http://i80.meishichina.com/attachment/recipe/2012/09/03/20120903191349544099136.jpg?x-oss-process=style/c180",
    title: "番茄蛋汤",
    desc: "酸甜可口，厨房小白也能做~"
  },
  {
    imgUrl: "http://i3.meishichina.com/attachment/recipe/2018/04/26/20180426152473843626510104208.jpg?x-oss-process=style/c180",
    title: "杂粮粥",
    desc: "养胃又养气，好喝还不胖~"
  }
];
/* 初始化每一列的数据 */
for (let i = 1; i <= flowData.column; i++) {
  flowData[`column_${i}`] = [];
}
/* 生命周期函数-实例被挂载后调用 */
onMounted(() => {
  initValue(0);
});
/* 计算列宽 */
const widthCalc = computed(() => {
  return `${100 / flowData.column - flowData.columnSpace}%`;
});
/* 计算 margin 外边距 */
const marginCalc = computed(() => {
  const columnWidth = 100 / flowData.column - flowData.columnSpace;
  return `${(100 - columnWidth.toFixed(5) * flowData.column) / (flowData.column - 1)}%`;
});

/* 获取最小值的对象 */
const getMinObj = (a, s) => {
  let m = a[0][s];
  let mo = a[0];
  for (let i = a.length - 1; i >= 0; i--) {
    if (a[i][s] < m) m = a[i][s];
  }
  mo = a.filter(i => i[s] === m);
  return mo[0];
};
/* 计算每列的高度 */
function getMinColumnHeight() {
  return new Promise(resolve => {
    const heightArr = [];
    for (let i = 1; i <= flowData.column; i++) {
      uni
        .createSelectorQuery()
        .in(_this)
        .select(`#cont_${i}`)
        .boundingClientRect(res => {
          heightArr.push({ column: i, height: res.height });
        })
        .exec(() => {
          if (flowData.column <= heightArr.length) {
            resolve(getMinObj(heightArr, "height"));
          }
        });
    }
  });
}
/* 初始化瀑布流数据 */
async function initValue(i) {
  if (i >= flowData.list.length) return false;
  const minHeightRes = await getMinColumnHeight();
  flowData[`column_${minHeightRes.column}`].push({
    ...flowData.list[i],
    index: i
  });
}
/* 图片加载完成 */
function imgLoad(item) {
  const i = item.index;
  initValue(i + 1); // 加载下一条数据
}
/* 图片加载失败 */
function imgError(item) {
  const i = item.index;
  initValue(i + 1); // 加载下一条数据
}



function scroll(e) {
	console.log(e)
	this.old.scrollTop = e.detail.scrollTop
}
function goTop(e) {
	// 解决view层不同步的问题
	this.scrollTop = this.old.scrollTop
	this.$nextTick(function() {
		this.scrollTop = 0
	});
	uni.showToast({
		icon: "none",
		title: "纵向滚动 scrollTop 值已被修改为 0"
	})
}

function combindStr(Str:string){
	let combindStr = baseurl + Str
	return combindStr;
}



</script>

<style lang="scss">
	
$nav-height: 30px;
.uni-margin-wrap{
	width: 100%;
}
.SW{
	position: relative;
}
.container{
	height: 100%;
	width: 100%;
	z-index:10;
	
}
.box-bg {
	background-color: #F5F5F5;
	padding: 5px 0;
}

.input-view {
	display: flex;
	flex-direction: row;
	height: $nav-height;
	padding: 0 15px;
	flex-wrap: nowrap;
	margin: 7px 0;
	line-height: $nav-height;
}

.input-uni-icon {
	line-height: $nav-height;
}

.nav-bar-input {
	height: $nav-height;
	line-height: $nav-height;
	padding: 0 5px;
	font-size: 12px;
	background-color: #f8f8f8;
}
.tabs {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #ffffff;
	/* #ifndef APP-PLUS */
	height: 100vh;
	/* #endif */
}

.scroll-h {
	width: 750rpx;
	/* #ifdef H5 */
	width:100%;
	/* #endif */
	height: 80rpx;
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	/* flex-wrap: nowrap; */
	/* border-color: #cccccc;
	border-bottom-style: solid;
	border-bottom-width: 1px; */
}

.line-h {
	height: 1rpx;
	background-color: #cccccc;
}

.uni-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	padding-left: 34rpx;
	padding-right: 34rpx;
}

.uni-tab-item-title {
	color: #555;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.uni-tab-item-title-active {
	color: #007AFF;
}

.swiper-box {
	flex: 1;
	
}

.swiper-item {
	flex: 1;
	flex-direction: row;
	height: 250px;
}

.scroll-v {
	flex: 1;
	/* #ifndef MP-ALIPAY */
	flex-direction: column;
	/* #endif */
	width: 750rpx;
	width:100%;
}

.update-tips {
	position: absolute;
	left: 0;
	top: 41px;
	right: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #FDDD9B;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.update-tips-text {
	font-size: 14px;
	color: #ffffff;
}

.refresh {
	width: 750rpx;
	width:100%;
	height: 64px;
	justify-content: center;
}

.refresh-view {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.refresh-icon {
	width: 30px;
	height: 30px;
	transition-duration: .5s;
	transition-property: transform;
	transform: rotate(0deg);
	transform-origin: 15px 15px;
}

.refresh-icon-active {
	transform: rotate(180deg);
}

.loading-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	color: #999999;
}

.loading-text {
	margin-left: 2px;
	font-size: 16px;
	color: #999999;
}

.loading-more {
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.loading-more-text {
	font-size: 28rpx;
	color: #999;
}
.SW-item{
	border-radius: 0px 0px 0px 0px;
	
}
.sdv{
	// background-color: #b7ff42;
	// height: 900px;
	
	// border-radius: 20px 20px 0px 0px;
	// margin-top: -40px;
	// z-index:90;
	position: absolute;
	height: 100%;
	margin-top: -20px;
	width: 100%;
	// height: 100%;
	border-radius: 20px 20px 0px 0px;
	background-color: #efefef;
}

.uni-swiper-dot{
	width: 10rpx;
	height: 10rpx;
	background: #FFFFFF;
	border-radius: 50%;
	margin-bottom: 20px;
	
}
.uni-swiper-dot-active{
	width: 18rpx;
	height: 6rpx;
	background: #24EA8C;
	border-radius: 0;
}
.scroll-view-item_H {
	display: inline-block;
	width: 50%;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}

.custom-cover {
	flex: 1;
	flex-direction: row;
	position: relative;
	margin-right: 20px;
	
}

.cover-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	
	background-color: rgba($color: #f8f8f8, $alpha: 0.8);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 15px;
	font-size: 14px;
	color: #000000;
}
.cover-conten {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	margin-bottom: 5px;
	font-size: large;
	background-color: rgba($color: #adadad, $alpha: 0.7);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 15px;
	font-size: 16px;
	color: #FFF;
}
.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
		
.waterfall {
  
  padding: 5rpx;
  .cont-box {
    $borderRadius: 12rpx;
    float: left;
    .item-box {
      width: 100%;
      padding-bottom: 20rpx;
      margin-bottom: 30rpx;
      border-radius: $borderRadius;
      box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
      .img-tip {
        width: 100%;
        border-radius: $borderRadius $borderRadius 0 0;
      }
      .tit-tip {
        text-align: justify;
        font-size: 30rpx;
        padding: 10rpx 20rpx 0;
        font-weight: 900;
      }
      .desc-tip {
        text-align: justify;
        font-size: 26rpx;
        padding: 5rpx 20rpx 0;
        margin-top: 10rpx;
      }
    }
  }
}
/* 多行省略 */
.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 2; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}
/* 单行省略 */
.one-line-omit {
  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
  white-space: nowrap; // 溢出不换行
  overflow: hidden; // 超出的文本隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
}
.scroll-Y {
	height: 1200px;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item {
	height: 100%;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
.scroll-view-item_H {
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}

</style>